<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Variable fonts: weight</title>
    <link rel="stylesheet" href="../assets/styles.css" />
    <style>
      /*
        Mutator Sans is created by LettError (https://github.com/LettError/mutatorSans)
        and is used here under the terms of its license:
        https://github.com/LettError/mutatorSans/blob/master/LICENSE
        */
    </style>

    <style class="editable">
      @font-face {
        src: url("fonts/MutatorSans.ttf");
        font-family: "MutatorSans";
        font-style: normal;
        font-weight: 1 1000;
      }

      label {
        font: 1rem monospace;
        white-space: nowrap;
      }

      .sample {
        text-transform: uppercase;
        font:
          1.5rem "MutatorSans",
          sans-serif;
      }
    </style>
  </head>

  <body>
    <section class="preview">
      <div class="container">
        <p class="sample">
          ...it would not be wonderful to meet a Megalosaurus, forty feet long
          or so, waddling like an elephantine lizard up Holborn Hill.
        </p>
      </div>
    </section>

    <textarea class="playable playable-css" style="height: 280px">
@font-face {
  src: url('fonts/MutatorSans.ttf');
  font-family:'MutatorSans';
  font-style: normal;
  font-weight: 1 1000;
}

label {
  font: 1rem monospace;
  white-space: nowrap;
}

.sample {
  text-transform: uppercase;
  font: 1.5rem 'MutatorSans', sans-serif;
  font-weight: 500;
}</textarea
    >

    <textarea class="playable playable-html" style="height: 130px">
<div class="container">
  <p class="sample">...it would not be wonderful to meet a Megalosaurus, forty feet long or so, waddling like an elephantine lizard up Holborn Hill.</p>
</div></textarea
    >

    <div class="playable-buttons">
      <input id="reset" type="button" value="Reset" />
    </div>
  </body>

  <script src="../assets/playable.js"></script>
</html>
